<template>
  <div>
    <h2>hello</h2>
    <!-- <div class="pay-address">{{ payAddress }}</div> -->
    <canvas ref="qrcodeCanvas" :width="canvasSize" :height="canvasSize"></canvas>
  </div>
</template>

<script>
import qrcode from 'qrcode'
import { getQrcode } from '@/api/alipay'
export default {
  name: 'HotelSystemAdminCc',

  data () {
    return {
      // payAddress: '',
      canvasSize: 256
    }
  },
  created () {

  },
  async mounted () {
    // 注意先加载数据 最后再往canvas中写
    const { data: res } = await getQrcode()
    this.payAddress = res.data.qr_code
    // 使用 qrcode 生成二维码图片
    qrcode.toCanvas(this.$refs.qrcodeCanvas, this.payAddress, {
      width: this.canvasSize,
      height: this.canvasSize
    })
  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
.pay-address {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
</style>
